<template>
	<view class="l_container">
		<view class="fun_list">
			<view class="item" v-for="(item, i) in funList" :key="i" @click="item.fn()">
				<view class="left">
					<!-- 	<image :src="item.leftUrl" :style="{ width: item.w + 'rpx', height: item.h + 'rpx' }"
						style="padding-right: 8rpx;box-sizing: border-box" mode="">
					</image> -->
					<view class="">
						{{ item.text }}
					</view>
				</view>
				<view class="right">
					<image style="width: 11rpx;height: 22rpx" :src="item.rightUrl" mode=""></image>

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import service from './static/service_policy.png';
	import privacy from './static/privacy_policy.png';
	import {
		TipsShow
	} from "../../utils/common.js"
	import {
		ref
	} from 'vue';
	const funList = ref([{
			leftUrl: service,
			text: '服务协议',
			rightUrl: '/static/arrow.png',
			w: 34,
			h: 34,
			fn: () => {
				uni.navigateTo({
					url: "/pageA/privacyprotocol/privacyprotocol"
				})
			}
		},
		{
			leftUrl: privacy,
			text: '隐私协议',
			rightUrl: '/static/arrow.png',
			w: 32,
			h: 40,
			fn: () => {
				uni.navigateTo({
					url: "/pageA/loginprotocol/loginprotocol",
				})
			}
		}
	])
</script>

<style lang="scss" scoped>
	.l_container {
		min-height: 100vh;

		.fun_list {
			padding: 30rpx 40rpx;
			box-sizing: border-box;

			.item {
				padding: 30rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				// border: 2rpx solid red;

				.left {
					display: flex;
					align-items: center;
				}
			}
		}

	}
</style>